<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">文章资讯</block>
		</cu-custom>
		<!--横向切换tab-->
		<scroll-view scroll-x class="nav bg-white" scroll-with-animation  :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in navTop" :key="index"
			@tap="tabSelect" :data-id="index"
			>
			{{item.title}}
			</view>
		</scroll-view>
		

	
		
		<view class="cu-card article" :class="isCard?'no-card':''">
			<view class="cu-item shadow boderBottom" v-for="(item,index) in newsList" :key="index" @click="goNews(item.id)">
				<view class="title"><view class="text-cut text-bold text-lg">{{item.title}}</view></view>
				<view class="content">
					<image :src="item.img"
					 mode="aspectFit"></image>
					<view class="desc">
						<view class="text-content">{{item.content}}</view>
						<view class="margin-top-xs" style="display: flex; align-items: center; justify-content: space-between;"> 
						<view class="text-gray light sm text-df round  fl">{{item.createdAt | formatDate}}</view>
						<view>
							<view class="text-gray light sm round margin-lr-xs" style="display: inline-flex;  align-items: center;">
								<text class="text-gray cuIcon-attentionfill tetx-df" style="margin-right:6rpx"></text>
									<text class="text-df" style="margin-top: 2rpx;">{{item.seeNum}}</text>
							</view>
							<view class="text-gray light sm round margin-lr-xs" style="display: inline-flex;  align-items: center;">
								<text class="text-gray cuIcon-appreciatefill text-df"
									style="margin-right: 6rpx;"></text>
								<text class="text-df" style="margin-top: 2rpx;">{{item.likesNum}}</text>
							</view>
							<view class="text-gray light sm round margin-lr-xs" style="display: inline-flex;  align-items: center;">
							<text class="text-gray cuIcon-share text-df"
								style="margin-right: 6rpx;"></text>
							<text class="text-df" style="margin-top: 2rpx;">{{item.commentNum}}</text>
							</view>
						</view>
						</view>						
					</view>
				</view>
			</view>
		
		
		<view class="page-box" v-if="newsList.length < 1">
			<view>
				<view class="centre">
					<image src="https://cdn.zhoukaiwen.com/noData1.png" mode="widthFix"></image>
					<view class="explain">
						暂无数据
						<view class="tips">可以去看看有其他</view>
					</view>
					<!-- <view class="btn">随便逛逛</view> -->
				</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
		import request from '@/common/request.js';
	export default {
		data() {
			return {
				newsList:  [
        {
            "author": "Kevin",
            "commentNum": 887,
            "content": `项目基于vue-uniapp，使用colorUi与uView框架，完美支持微信小程序，包含功能：自定义TabBar与顶部、地图轨迹回放、电子签名、自定义相机/键盘、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封装等～ 方便同行小伙伴参考；
&项目链接：https://gitee.com/kevin_chou/qdpz`,
            "createdAt": 1664386507006,
            "id": 1,
            "img": "https://cdn.zhoukaiwen.com/Ftk7V5qMnpSAYNTXR2YaK2JFdlkt",
            "imgList": "https://cdn.zhoukaiwen.com/FuXEx9dURbfa_4TIzM1gtWYtkIYy,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/Fi1OviL0gjCKP2EidMOC9Q93wz2w,https://cdn.zhoukaiwen.com/FsQAHnCVzEgqp62bC-dXSfNgD9Fc",
            "likesNum": 902,
            "seeNum": 12083,
            "state": 1,
            "title": "「前端铺子」开源了，前端者必备项目",
            "type": 2
        },
        {
            "author": "Kevin",
            "commentNum": 471,
            "content": `【NodeJS】基于Nodejs+Nodemon+MySQL制作的前端铺子后端它来了：更简易的代码（一看就会）、更优秀的性能（高并发）、更简单的运行部署（傻瓜式），目前已完成：【登录】【项目管理】【文章管理】【上传文件】
&【后台管理系统】使用Ant Design Vue的Ui框架开发的后台管理系统，前后分离，简单轻量，配合前端铺子NodeJS后端开箱即用！
项目均使用最为宽松的MIT开源协议，无需任何授权即可免费商用，希望可以减少大家重复代码的时间，多去陪陪家人，陪陪孩子！
&后台链接：https://gitee.com/kevin_chou/qdpz-nodejs
&管理系统链接：https://gitee.com/kevin_chou/qdpz-admin"`,
            "createdAt": 1664306800109,
            "id": 3,
            "img": "https://cdn.zhoukaiwen.com/Fpb1vjnDM1L343kzL5lyuKOFREKC",
            "imgList": "https://cdn.zhoukaiwen.com/Furn2Px33iqRkw9TYAgGP6oQPwag,https://cdn.zhoukaiwen.com/FsASeggcSyqniDLgS6sr9HZM7JwU,https://cdn.zhoukaiwen.com/FjEzX3G6zY0wKaYzjSZrdIB_gT_W,https://cdn.zhoukaiwen.com/FkD3wMH5muktcHfqijdM-oCX8uvm",
            "likesNum": 490,
            "seeNum": 6821,
            "state": 1,
            "title": "前端铺子【NodeJS后端】+【Vue管理系统】已开源，持续更新中~",
            "type": 4
        },
        {
            "author": "kevin",
            "commentNum": 437,
            "content": "前端铺子专用设计师作品集展示，铺子对UI设计的追求一向很高，致力于为开发者、互联网科技企业提供的ui外包、软件界面设计、网站设计，用户研究、交互设计等服务；&我的们设计师一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合；&设计仅展示部分项目，欢迎骚扰~",
            "createdAt": 1664386202474,
            "id": 6,
            "img": "https://cdn.zhoukaiwen.com/FsD6malrWDZymsmvPEyExirfqAxX",
            "imgList": "https://cdn.zhoukaiwen.com/FnPlYKG08VSiKZ42UAQ43ta6tcIF,https://cdn.zhoukaiwen.com/FkIVFEF773uOS1GY7bZg-QA7xdgP,https://cdn.zhoukaiwen.com/FvvL3n_p6co0HUaiG6O1KIssZK0d,https://cdn.zhoukaiwen.com/FisWZWaqeoxuSeUOsq2jJJMEPZug,https://cdn.zhoukaiwen.com/FgOY4gBoS75oTQiGnb5BZs81lfjz,https://cdn.zhoukaiwen.com/Ft22JRKuKQ0CtYga_ezYHeknWhhB,https://cdn.zhoukaiwen.com/FrcszulV0DLyeYvivDJTKXhFmqMp,https://cdn.zhoukaiwen.com/FhjYE-zGygW-hIeHcAElpM5MGroR,https://cdn.zhoukaiwen.com/FtQk9EuERy1lbHaieNAoLlaqG6l4,https://cdn.zhoukaiwen.com/FiFDK3owQxAe5OaPSnqLROQSg_dz,https://cdn.zhoukaiwen.com/FsyWGfXAIVp0Ig43Mo9Kjcfrm9n1,https://cdn.zhoukaiwen.com/FgQ5vmDjs3ZsP-lcpMdZmymHoqH9",
            "likesNum": 497,
            "seeNum": 5605,
            "state": 1,
            "title": "大片来袭~ 铺子专用设计师ui作品集，高清",
            "type": 3
        },
        {
            "author": "kevin",
            "commentNum": 282,
            "content": `我们秉承“高质量·低成本·好口碑·服务保障”的核心价值观，并以“诚实、宽容、创新、服务”为精神，通过自主创新和真诚合作为企业互联网及信息服务行业创造价值。
&【关于我们】
&我们是由程序员及设计师组成的工作室，以互联网平台运营、Node开发、PHP开发、WEB应用开发、软件开发、网站建设、大数据分析、微信/移动端互联网开发、域名服务器等技术为核心的科技公司。我们致力于打造网站建设和网络营销标杆企业，为客户提供网络整合营销解决方案，我们是一个年轻的团队我们有激情，有创新的思维，有大胆新颖的创意，我们主要以技术及创新产品为业务主导，把握移动互联网行业需求，利用互联网核心技术为客户提供可靠稳定功能优异的一体化解决方案；
&【服务内容】
&网站建设：定制化网站建设、模板极速建站、商城网站、手机网站、营销网站、门户论坛、大型2B2C平台
&微信开发：微信小程序、公众号开发、APP开发、微商城、微官网、微会员、微客服等
&推广运营：新媒体运营、SEO、公众号代运营、品牌宣传等
&【服务流程】
&1、沟通了解客户需求。
&2、根据客户的需求，我们拟开发方案、设计产品功能并提交客户确认。
&3、根据设计方案进行报价，客户确认后签定合同，客户支付定金。
&4、确定UI设计，无误后进行开发工作。
&5、按时间节点分步提交客户确认功能，最终至客户验收。
&【我们的优势】
&充分与客户需求、帮您设计完善软件功能或内容信息，做到精益求精的代码，确保项目稳定高效的交付，专业开发团队保障品质，服务能力放心可靠，确保所想即所得
& 欢迎点击下方咨询或加微信280224091~`,
            "createdAt": 1664388058853,
            "id": 7,
            "img": "https://cdn.zhoukaiwen.com/FoO7TXdVIb2BY4ehGbjhLXwCe595",
            "imgList": "https://cdn.zhoukaiwen.com/Fv0r6joVmotSYCjhCfSsIDubMNS_,https://cdn.zhoukaiwen.com/FubuXzFqIGB3pBVwypy-MpCcNAXT",
            "likesNum": 261,
            "seeNum": 3480,
            "state": 1,
            "title": "软件开发专业团队~ 源码交付+价格透明！全行业软件开发",
            "type": 7
        }
    ],
				isCard: true,
				requestStatus: false, // 事件防抖
				TabCur: 0,
				scrollLeft: 0,
				navTop: [{
						id: 1,
						title: '全部'
					},
					{
						id: 2,
						title: 'Web前端'
					},
					{
						id: 3,
						title: 'UI设计'
					},
					{
						id: 4,
						title: 'Node后台'
					},
					{
						id: 5,
						title: '面试精选'
					},
					{
						id: 6,
						title: '技术前沿'
					},
					{
						id: 7,
						title: '更多资讯'
					}
				]
			}
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日	 + ' ' + h + ':' + m
				return y + '-' + MM + '-' + d; //年月日时分秒
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				setTimeout(() => {
					this.getData();
					this.requestStatus = false;	// 模拟执行完毕，改变 requestStatus
				}, 300);
				
			},
			getData() {
				var type = this.navTop[this.TabCur].id;
				if(type== '1'){
					this.newsList = [
        {
            "author": "Kevin",
            "commentNum": 887,
            "content": `项目基于vue-uniapp，使用colorUi与uView框架，完美支持微信小程序，包含功能：自定义TabBar与顶部、地图轨迹回放、电子签名、自定义相机/键盘、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封装等～ 方便同行小伙伴参考；
&项目链接：https://gitee.com/kevin_chou/qdpz`,
            "createdAt": 1664386507006,
            "id": 1,
            "img": "https://cdn.zhoukaiwen.com/Ftk7V5qMnpSAYNTXR2YaK2JFdlkt",
            "imgList": "https://cdn.zhoukaiwen.com/FuXEx9dURbfa_4TIzM1gtWYtkIYy,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/Fi1OviL0gjCKP2EidMOC9Q93wz2w,https://cdn.zhoukaiwen.com/FsQAHnCVzEgqp62bC-dXSfNgD9Fc",
            "likesNum": 902,
            "seeNum": 12083,
            "state": 1,
            "title": "「前端铺子」开源了，前端者必备项目",
            "type": 2
        }]
				}else if(type == 3){
					this.newsList = [ {
            "author": "Kevin",
            "commentNum": 471,
            "content": `【NodeJS】基于Nodejs+Nodemon+MySQL制作的前端铺子后端它来了：更简易的代码（一看就会）、更优秀的性能（高并发）、更简单的运行部署（傻瓜式），目前已完成：【登录】【项目管理】【文章管理】【上传文件】
&【后台管理系统】使用Ant Design Vue的Ui框架开发的后台管理系统，前后分离，简单轻量，配合前端铺子NodeJS后端开箱即用！
项目均使用最为宽松的MIT开源协议，无需任何授权即可免费商用，希望可以减少大家重复代码的时间，多去陪陪家人，陪陪孩子！
&后台链接：https://gitee.com/kevin_chou/qdpz-nodejs
&管理系统链接：https://gitee.com/kevin_chou/qdpz-admin`,
            "createdAt": 1664306800109,
            "id": 3,
            "img": "https://cdn.zhoukaiwen.com/Fpb1vjnDM1L343kzL5lyuKOFREKC",
            "imgList": "https://cdn.zhoukaiwen.com/Furn2Px33iqRkw9TYAgGP6oQPwag,https://cdn.zhoukaiwen.com/FsASeggcSyqniDLgS6sr9HZM7JwU,https://cdn.zhoukaiwen.com/FjEzX3G6zY0wKaYzjSZrdIB_gT_W,https://cdn.zhoukaiwen.com/FkD3wMH5muktcHfqijdM-oCX8uvm",
            "likesNum": 490,
            "seeNum": 6821,
            "state": 1,
            "title": "前端铺子【NodeJS后端】+【Vue管理系统】已开源，持续更新中~",
            "type": 4
        }]
				}else{
					//其他模块先置空
					this.newsList = []
				}
			
			},
			goNews(id) {
				// uni.navigateTo({
				// 	url: '../news/news?id=' + id,
				// })
			}
			
			
		}
	}
</script>

<style>
	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	
		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
	
		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}
</style>
